<template>
	<view style="width:100%">
		<!-- 		<Navigate :title="title" /> -->
		<Info :item="info" />
		<view class="padding flex btns">
			<text class="cu-btn" @click="handleAutoGrab" decode v-show="!grabbing">Automatic \n order grabbing</text>
			<text class="cu-btn grabbing" decode v-show="grabbing">Automatic \n order grabbing</text>
			<text class="cu-btn" @click="handleStopAutoGrab" style="margin-left:14rpx;color:#FF9637;" decode>STOP \n order grabbing</text>
		</view>
		<view class="tip-wrap">
			<view class="tip">Search and crawl orders</view>
			<view class="progress-box">
				<progress :percent="percent" activeColor="red" active stroke-width="4"/>
			</view>
			<image class="car" src="../../static/images/grab/car.png"></image>
		</view>
		<!-- 抢单成功确认框 -->
		<confirm :orderinfo="confirmInfo" @confirm="submitOrder" @cancel="handleCancelOrder" v-if='showConfirm'></confirm>
		<!-- 提交订单弹出框 -->
		<submitSuccess v-show="submitSuccess" @cancel="submitSuccess=false"></submitSuccess>

		<ZTabbar :current="2" />
		<toast></toast>
	</view>
</template>

<script>
import Navigate from '@/components/Navigate/index.vue';
import Info from './components/Info/index.vue';
import confirm from './components/confirm/index.vue';
import submitSuccess from './components/confirm/submitSuccess.vue';
import Remark from './components/Remark/index.vue';
import fetch from '@/common/fetch.js';
import ZTabbar from '@/components/ZTabbar/index.vue';
export default {
	components: {
		Navigate,
		Info,
		Remark,
		ZTabbar,
		confirm,
		submitSuccess
	},
	data() {
		return {
			showConfirm:false,
			submitSuccess:false,
			confirmInfo:{},
			counter: 5,
			percent:0,
			grabbing:false,
			machter: null,
			autoFetchMachter: null,
			info: {
				day_order_num: '0',
				yongjin_percent: '0',
				team_money: '0',
				grabbed_order: '0',
				frozon_order: '0',
				frozon_money: '0',
				grabbed_order_total_amount: '',
				text: {
					content: ''
				}
			},
			title: '抢单'
		};
	},
	// onLoad() {
	// 	fetch.request('/index/Qiang/index', '', 'GET').then(res => {
	// 		if (res.code === 0) {
	// 			this.info = res.data;
	// 		}
	// 	});
	// },
	onShow() {
		this.getInfo();		
	},
	destroyed() {
		// clearInterval(this.autoFetchMachter);
		clearInterval(this.machter);
	},
	onHide() {
		// clearInterval(this.autoFetchMachter);
		clearInterval(this.machter);
	},
	onUnload() {
		clearInterval(this.machter);
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/record/index'
		});
	},
	methods: {
		getInfo(){
			fetch.request('/index/Qiang/index', '', 'GET').then(res => {
				if (res.code === 0) {
					this.info = res.data;
				}
			});
		},
		autoFetch() {			
			fetch.request('/index/Qiang/grab', '', 'GET').then(res => {					
				if (res.code === 0 || res.code === '0') {
					clearInterval(this.autoFetchMachter);
					let result = res.data;					
					this.ScanAudio(result);
					this.grabbing=false;
					this.confirmInfo = result;
					this.showConfirm=true;
				} else if (res.code === '-3' || res.code === -3) {
					uni.showModal({
						title: 'Tip',
						content: res.msg,
						showCancel: false
					});
					this.handleStopAutoGrab();
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
					this.handleAutoGrab();
				}
			})
		},
		handleAutoGrab() {		
			this.grabbing=true;	
			let that = this;
			setTimeout(()=>{that.percent = 100},2000)		
			this.machter = setInterval(() => {
				if (this.counter > 0) {
					this.$loading({
						loading: true,
						value: this.counter.toString(),
						duration: 1000
					});
					
					this.counter--;					
				} else {
					this.counter = 5;
					this.percent = 0;
					clearInterval(this.machter);
					this.autoFetch();
					this.$loading({
						loading: false,
						value: 0,
						duration: 1000
					});
				}
			}, 1000);
		},
		/**取消订单 */
		handleCancelOrder(){		
			fetch.request('/index/Qiang/cancel',	
				{
					order_id: this.confirmInfo.order.order_id	
				},'POST'
				).then(res => {				
					if (parseInt(res.code) === 0) {						
						this.showConfirm=false;
							uni.showToast({
								title: 'Cancel successfully',
								icon: 'none',
								duration: 2000
							});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
		},
		/**提交订单 */
		submitOrder(){
			fetch.request('/index/Qiang/confirm',	
				{
					order_id: this.confirmInfo.order.order_id	
				},'POST'
				).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					this.showConfirm=false;
					if (parseInt(res.code) === 0) {						
						this.submitSuccess = true;
						this.getInfo();	
					}
				});
		},
		handleStopAutoGrab() {
			this.grabbing=false;
			this.percent = 0;
			this.$loading({
				loading: false,
				value: 0,
				duration: 1000
			});
			clearInterval(this.machter);
			this.counter = 5;	
		}
	}
};
</script>

<style lang="less" scoped>
.bg-uv {
	background-color: #f53d46;
}
.line-uv,
.lines-uv,
.text-uv {
	color: #f53d46;
}
uni-button.bg-uv:not([type]),
uni-button.bg-uv[disabled][type='default'],
wx-button.bg-uv:not([type]),
wx-button.bg-uv[disabled][type='default'] {
	color: #fff;
	background-color: #f53d46;
}
uni-toast .uni-simple-toast__text,
wx-toast .wx-simple-toast__text {
	font-size: 32px;
}
.btns {
	padding: 0 30rpx;
	margin-top: -40rpx;
	position: relative;
	.cu-btn {
		width: 338rpx;
		height: 120rpx;
		background: #ffffff;
		box-shadow: 0px 10rpx 20rpx 0px rgba(30, 30, 31, 0.06);
		border-radius: 16rpx;
		color: #f53d46;
	}
	.grabbing{
		color:#D2D2DB;
	}
}
.tip-wrap {
	display: flex;
	padding: 100rpx 30rpx;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	.car {
		width: 120rpx;
		height: 114rpx;
		margin-top: 40rpx;
	}
	.progress-box{
		width: 690rpx;
		margin-top: 20rpx;
	}
}
.tip {
	font-size: 36rpx;
	font-weight: 600;
	color: #1e1e1f;
	line-height: 36rpx;
}
</style>
